<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>限时秒杀</title>
    <style>
        .box{
            margin: 0 auto;
            position: relative;
            background: url(images/flash_sale.png);
            width: 702px;
            height: 378px;
        }
        .box div{
            float: left;
            width: 50px;
            height: 50px;
            border: 1px solid red;
            margin-left:5px;
            line-height: 50px;
            text-align: center;
            color:red;
            position: relative;
            top: 260px;
            left: 305px;
        }

    </style>
</head>
<body>
    <div class="box">
        <div id="d"></div>
        <div id="h"></div>
        <div id="m"></div>
        <div id="s"></div>
    </div>

</body>
<script>
    //设置秒杀结束时间
    var endtime = new Date('2020-5-22 21:09:09'),endseconds = endtime.getTime();
    //申明变量保存剩余时间
    var d=h=m=s;
    //设置定时器，实现限时秒杀
    var id=setInterval(seckill,1000);
    //秒杀函数
    function seckill(){
        var nowtime = new Date(); //获取当前时间
        //获取时间差，单位为秒
        var remaining = parseInt((endseconds-nowtime.getTime())/1000);
        
        if(remaining > 0){
            d=parseInt(remaining/(60*60*24)); //计算剩余天数
            h=parseInt((remaining/3600)%24);  //计算剩余小时
            m=parseInt((remaining/60)%60);    //计算剩余分钟
            s=parseInt(remaining%60);         //计算剩余秒
            //统一使用两位数来表示天数，小时，分钟，秒数(三元运算符)
            d = d < 10 ? '0' + d : d;
            h = h < 10 ? '0' + h : h;
            m = m < 10 ? '0' + m : m;
            s = s < 10 ? '0' + s : s;
        }else{ 
            clearInterval(id); //秒杀过期，取消定时器
            d = h = m = s = '00';
        }
        //将计算出来的时间输出在页面中
        document.getElementById('d').innerHTML = d + '天';
        document.getElementById('h').innerHTML = h + '时';
        document.getElementById('m').innerHTML = m + '分';
        document.getElementById('s').innerHTML = s + '秒';
    }
</script>
</html>